<template>
  <a-modal
    title="构件二维码打印"
    :width="680"
    :visible="visible"
    :confirmLoading="confirmLoading"
    @ok="handleSubmit"
    @cancel="handleCancel"
    cancelText="关闭"
    okText="打印"
  >
    <a-spin :spinning="confirmLoading">
      <a-card :bordered="false" :class="{'abcdefg':true}">
        <div class="no-print" style="text-align: right">
          <a-button v-print="'#printContent'" ghost type="primary" ref="ref_print" hidden>打印</a-button>
        </div>
        <section ref="print" id="printContent" class="abcdefg">
          <div style="width:100%;text-align: center;position:relative;display:flex;align-items:center;padding-top: 10%;">
            <div style="text-align: center;display:table;margin:0 auto;">
              <h2 style="font-weight: bold;">鑫晟钢业MES系统</h2>
              <p><span style="font-weight: bold;">打印时间：</span><span>{{ dateFormat(printData) }}</span></p>
              <div style="width: 150px;height: 150px;margin:0 auto;"><qrcode v-if="code" :value="code" :size='150'/></div>
              <div class="gutter-example" style="width: 650px;text-align: left;margin-top: 10px;">
                <a-row :gutter="24">
                  <a-col class="gutter-row" :span="16">
                    <div class="gutter-box" style="padding-left: 80px;">
                      <p a-x><span style="font-size: 10px;font-weight: bold">工程名称：</span><span style="font-size: 10px;">{{ engineName }}</span></p>
                    </div>
                  </a-col>
                  <a-col class="gutter-row" :span="8">
                    <div class="gutter-box">
                      <p><span style="font-size: 10px;font-weight: bold;">构件钢号：</span><span style="font-size: 10px;">{{ steelSpecification }}</span></p>
                    </div>
                  </a-col>
                </a-row>
              </div>

              <div class="gutter-example" style="width: 480px;text-align: center;padding-left: 80px;">
                <a-row :gutter="24">
                  <a-col class="gutter-row" :span="8">
                    <div class="gutter-box">
                      <p><span style="font-size: 10px;font-weight: bold">位置：</span><span style="font-size: 10px">{{ location }}</span></p>
                    </div>
                  </a-col>
                  <a-col class="gutter-row" :span="8">
                    <div class="gutter-box">
                      <p><span style="font-size: 10px;font-weight: bold">重量：</span><span style="font-size: 10px">{{ totalWeight }}</span></p>
                    </div>
                  </a-col>
                  <a-col class="gutter-row" :span="8">
                    <div class="gutter-box">
                      <p><span style="font-size: 10px;font-weight: bold">&emsp;面积：</span><span style="font-size: 10px">{{ area }}</span></p>
                    </div>
                  </a-col>
                </a-row>
              </div>
            </div>
          </div>
        </section>
      </a-card>
    </a-spin>
  </a-modal>
</template>

<script>

  import {getAction,getFileAccessHttpUrl} from '@/api/manage';
  import QrcodeVue from 'qrcode.vue'

  export default {
    name: "FramePrint",
    components: {
      qrcode:QrcodeVue
    },
    data() {
      return{
        visible: false,
        confirmLoading: false,
        engineName:'',
        steelSpecification:'',
        totalWeight:0,
        area:0,
        location:'',
        printData: new Date(),
        code:''
      }
    },
    created() {
    },
    methods:{
      handleSubmit () {
        this.$refs.ref_print.$el.click();
      },
      handleCancel () {
        this.visible = false;
      },
      show(id){
        if (id !== undefined )
          getAction(`/frame/findById`,{id:id}).then(res=>{
            this.loading=false
            this.engineName = res.engineName;
            this.steelSpecification = res.steelSpecification;
            this.totalWeight = res.totalWeight;
            this.area = res.area;
            this.location = res.location;
            this.visible = true;
            this.code = id;

          })
      },
      dateFormat(time) {
        let date=new Date(time);
        let year=date.getFullYear();
        /* 在日期格式中，月份是从0开始的，因此要加0
         * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
         * */
        let month= date.getMonth()+1<10 ? "0"+(date.getMonth()+1) : date.getMonth()+1;
        let day=date.getDate()<10 ? "0"+date.getDate() : date.getDate();
        let hours=date.getHours()<10 ? "0"+date.getHours() : date.getHours();
        let minutes=date.getMinutes()<10 ? "0"+date.getMinutes() : date.getMinutes();
        let seconds=date.getSeconds()<10 ? "0"+date.getSeconds() : date.getSeconds();
        // 拼接
        return year+"-"+month+"-"+day+" "+hours+":"+minutes+":"+seconds;
      },
      getAvatarView: function () {
        return getFileAccessHttpUrl(this.qrCodePicPath)
      },
    }
  }
</script>

<style scoped>
  @page{
    size:  auto;   /* auto is the initial value */
    margin: 3mm;  /* this affects the margin in the printer settings */
  }

  html{
    background-color: #FFFFFF;
    margin: 0px;  /* this affects the margin on the html before sending to printer */
  }

  body{
    border: solid 1px blue ;
    margin: 10mm 15mm 10mm 15mm; /* margin you want for the content */
  }
</style>